<template>
	<div class="userType_PC">
		<el-table
		  ref="multipleTable"
		  :data="tableData"
		  tooltip-effect="dark"
		  style="width: 100%"
			v-loading="isLoadingTable"
			highlight-current-row
		  @selection-change="handleSelectionChange"
		>
		  <el-table-column type="selection" width="40" align="center"></el-table-column>
			<el-table-column type="index" width="40" align="center"></el-table-column>
		  <el-table-column prop="username" label="用户名" align="center"></el-table-column>
		  <el-table-column prop="name" label="姓名" align="center"></el-table-column>
			<el-table-column prop="num" label="身份证号" align="center"></el-table-column>
			<el-table-column prop="position" label="职务" align="center"></el-table-column>
		  <el-table-column prop="mobilePhone" label="电话" align="center"></el-table-column>
		  <el-table-column label="状态" align="center">
				<template slot-scope="scope">
					<span v-if="scope.row.state == 'ENABLED'" style="color:green">启用</span>
					<span v-else style="color:red">禁用</span>
				</template>
			</el-table-column>
		  <el-table-column fixed="right" label="操作" width="360" align="center">
		    <template slot-scope="scope">
		      <el-button size="small" @click="handleViewAccount(scope.row)">查看</el-button>
		      <el-button size="small" @click="handleEditeAccount(scope.row)">编辑</el-button>
					<el-button size="small"  @click="handleRoleSelect(scope.row)">角色</el-button>
		      <el-button size="small" v-if="scope.row.state != 'ENABLED'" @click="handleStartAccount(scope.row)">启用</el-button>
					<el-button size="small" v-else @click="handleStopAccount(scope.row)">禁用</el-button>
		      <el-button size="small" type="danger" @click="handleDeleteAccount(scope.row)">删除</el-button>
		    </template>
		  </el-table-column>
		</el-table>
		<div class="pages">
		  <el-pagination
		    @current-change="handleCurrentChange"
		    :current-page.sync="currentPage"
		    :page-size="10"
		    layout="prev, pager, next, jumper"
		    :total="accountTotal"
		  ></el-pagination>
		</div>
		<!-- 新增用户弹框 -->
		<el-dialog :close-on-click-modal="false" :title="accountTitle" width="60%" :visible.sync="accountDialog" @close="handleClose('formData')" style="padding-bottom:5vh">
			<el-form label-width="80px" label-position="top" :model="dialogFormData" :rules="formrules" ref="formData" v-loading='dialogLoading'>
				<el-row>
					<el-col :span="8" class="p-1">
						<el-form-item label="用户名" prop="username">
							<el-input v-model="dialogFormData.username" placeholder="请输入用户名" :readonly="isReadonly"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8" class="p-1" v-show="submitType == 0 && !isReadonly">
						<el-form-item label="账户密码" prop="password">
							<el-input v-model="dialogFormData.password" type="password" placeholder="请输入初始化账号密码" :readonly="isReadonly"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8" class="p-1" v-show="submitType == 1 && !isReadonly">
						<el-form-item label="重置账户密码" prop="password">
							<el-input v-model="dialogFormData.password" type="password" placeholder="请输入初始化账号密码" :readonly="isReadonly"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8" class="p-1">
						<el-form-item label="真实姓名" prop="name">
							<el-input v-model="dialogFormData.name" placeholder="请输入真实姓名" :readonly="isReadonly"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8" class="p-1">
						<el-form-item label="手机号码" prop="mobilePhone">
							<el-input v-model="dialogFormData.mobilePhone" placeholder="请输入手机号码" type="number" :readonly="isReadonly"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8" class="p-1">
						<el-form-item label="身份证号" prop="num">
							<el-input v-model="dialogFormData.num" placeholder="请输入身份证号" :readonly="isReadonly"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8" class="p-1">
						<el-form-item label="座机" prop="specialPlane">
							<el-input style="width:100%" placeholder="请输入座机" v-model="dialogFormData.specialPlane" :readonly="isReadonly"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8" class="p-1">
						<el-form-item label="企业" prop="enterpriseId">
							<el-input style="width:100%" placeholder="请选择企业" v-model="dialogFormData.enterpriseName" :readonly="true" v-show="isReadonly"></el-input>
							<el-select placeholder="可模糊查询企业" v-model="dialogFormData.enterpriseId" style="width:100%" filterable remote :remote-method="getEnterpriseData" :loading="enterprise.loading" v-show="!isReadonly">
								<el-option v-for="item in enterprise.list" :key="item.id" :label="item.name" :value="item.id"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8" class="p-1">
						<el-form-item label="职务" prop="position">
							<el-input placeholder="请输入职务" v-model="dialogFormData.position" :readonly="isReadonly"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8" class="p-1">
						<el-form-item label="毕业院校" prop="graduateSchool">
							<el-input placeholder="请输入毕业院校" v-model="dialogFormData.graduateSchool" :readonly="isReadonly" style="width:100%"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8" class="p-1">
						<el-form-item label="毕业专业" prop="graduateSpecialty">
							<el-input placeholder="请输入毕业专业" v-model="dialogFormData.graduateSpecialty" :readonly="isReadonly" style="width:100%"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8" class="p-1">
						<!-- 新增 -->
						<el-form-item label="行政等级" prop="regionPermission" v-show="submitType == 0 || isEdite">
							<el-cascader v-model="dialogFormData.regionPermission" style="width:100%" :props="defaultPropsDistrict" ref="district" @change="handleSelectDistrict"></el-cascader>
						</el-form-item>
						<!-- 编辑 -->
						<el-form-item label="行政等级" v-show="submitType == 1 && !isEdite" prop="regionPermission">
							<el-input v-model="dialogFormData.regionName" :readonly="true" style="width:100%">
								<el-button slot="append" @click="handleChangeEdite" icon="el-icon-edit"></el-button>
							</el-input>
						</el-form-item>
						<!-- 查看 -->
						<el-form-item label="行政等级" v-show="submitType == 2" prop="regionPermission">
							<el-input v-model="dialogFormData.regionName" :readonly="true" style="width:100%"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8" class="p-1">
						<el-form-item label="所属机构" prop="organizationId">
							<el-input style="width:100%" placeholder="请选择所属机构" v-model="dialogFormData.organizationName" :readonly="true" v-show="isReadonly"></el-input>
							<el-select style="width:100%" placeholder="可模糊查询" v-model="dialogFormData.organizationId" remote filterable :remote-method="bindQueryOrganizations" :loading="organization.loading" v-show="!isReadonly">
								<el-option v-for="item in organization.list" :key="item.id" :label="item.name" :value="item.id"></el-option>
							</el-select>
						</el-form-item>						
					</el-col>
					<el-col :span="8" class="p-1">
						<el-form-item label="性别" prop="gender">
							<el-radio-group v-model="dialogFormData.gender" :disabled="isReadonly">
								<el-radio-button label="MAN">男</el-radio-button>
								<el-radio-button label="FEMALE">女</el-radio-button>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="24"></el-col>
					<el-col :span="8" class="p-1">
						<el-form-item label="身份证正面照" prop="identityFileId">
							<el-upload
							  :action="uploadUrl"
								:headers="headers"
								class="avatar-uploader"
								:show-file-list="false"
								:on-success="handleSuccessIDcardPositive"
								v-loading="IDcard.positiveLoading"
								:before-upload="beforeIDcardPositiveUpload"
								:disabled="isReadonly"
								accept=".jpg,.jpeg,.png">
								<img v-if="IDcard.positiveImageUrl" :src="IDcard.positiveImageUrl" class="avatar">
							  <i class="el-icon-plus"></i>
							</el-upload>
						</el-form-item>
					</el-col>
					<el-col :span="8" class="p-1">
						<el-form-item label="身份证反面照" prop="identityVersoFileId">
							<el-upload
							  :action="uploadUrl"
								:headers="headers"
								class="avatar-uploader"
								:show-file-list="false"
								:on-success="handleSuccessIDcardReverse"
								v-loading="IDcard.relativeLoading"
								:disabled="isReadonly"
								:before-upload="beforeIDcardRelativeUpload"
								accept=".jpg,.jpeg,.png">
								<img v-if="IDcard.relativeImageUrl" :src="IDcard.relativeImageUrl" class="avatar">
							  <i class="el-icon-plus"></i>
							</el-upload>
						</el-form-item>
					</el-col>
					<el-col :span="8" class="p-1">
						<el-form-item label="五大员证书" prop="membersFileId">
							<el-upload
							  :action="uploadUrl"
								:headers="headers"
								class="avatar-uploader"
								:show-file-list="false"
								:on-success="handleSuccessCertificate"
								v-loading="IDcard.certificateLoading"
								:disabled="isReadonly"
								:before-upload="beforeCertificateUpload"
								accept=".jpg,.jpeg,.png">
								<img v-if="IDcard.certificateImageUrl" :src="IDcard.certificateImageUrl" class="avatar">
							  <i class="el-icon-plus"></i>
							</el-upload>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" style="text-align: center;" v-show="!isReadonly">
				<el-button type="primary" @click="handleSubmit('formData')">提交</el-button>
				<el-button @click="handleReset('formData')" v-show="submitType == 0">重置</el-button>
			</div>
		</el-dialog>
		<!-- 设置角色 -->
		<el-dialog :close-on-click-modal="false" title="角色设置" width="30%" :visible.sync="rolesDialog" center>
		  <div style="border-top:1px solid #E9E9E9;padding-top:30px;">
		    <el-row v-loading="rolesDialogLoading">
		      <el-col :span="24">
		        <div>
		          <p class="rolesTitle">选择角色</p>
		          <div class="rolesBox" >
		            <p v-for="(item,index) in rolesList" :key='index' :class="item.isFalse==true?'clickNo':''"  @click="selectRoles(index)">
		              <span>{{item.name}}</span>
		              <span v-if="item.isFalse">✔</span>
		            </p>
		          </div>
		        </div>
		      </el-col>
		    </el-row>
		  </div>
		  <span slot="footer" class="dialog-footer">
		    <el-button type="primary" @click="handleSubmitRoles" :disabled="SelectRoles.length == 0" :loading="saveRoleBtnLoading">提 交</el-button>
		    <el-button @click="rolesDialog = false">取 消</el-button>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
	import { getAppAccountTable , accountAppNewAdd , accountAppEdite , accountDelete  , SaveAccountState ,getAppAccountDetail , getOrganizationDistrict , getEnterpriseData , getOrganizationList , getAccountRoles ,saveAccountRoles , getRolesData } from "@/api/project/system/account.js"
	import { getToken } from '@/utils/auth'
	import config from "@/config/index.js"
	export default {
		props:{
			queryForm:{
				type:Object,
				default:{
					name:'',
					mobilePhone:'',
					state:''
				}
			}
		},
		data() {
			return {
				//图片上传地址
				uploadUrl:config.baseUrlImg + '/pc/file/upload',
				headers:{
					'authorization':getToken(),
				},
				//新增APP用户
				dialogFormData:{
					username:"",
					password:"123456",
					name:"",
					mobilePhone:"",
					num:"",
					position:"",
					specialPlane:"",
					regionPermission:"",
					enterpriseId:"",
					graduateSchool:"",
					graduateSpecialty:"",
					gender:"MAN",
					identityFileId:"",
					identityVersoFileId:"",
					membersFileId:"",
					organizationId:"",
					enterpriseName:"",
					organizationName:""
				},
				//表单验证
				formrules:{
					username:[
						{required:true, message: '不能为空！', trigger: 'blur'}
					],
					password:[
						{required:true,message:'不能为空！',trigger:'blur'},
						{min:6,max:20,message:'限制在6~20位密码！',trigger:'blur'}
					],
					// name:[
					// 	{required:true,message:'不能为空！',trigger:'blur'},
					// ],
					// mobilePhone:[
					// 	{required:true,message:'不能为空！',trigger:'blur'},
					// 	{min:11,max:11,message:'手机格式错误！',trigger:'blur'},
					// ],
					// num:[
					// 	{required:true,message:'不能为空！',trigger:'blur'},
					// ],
				},
				//表格加载状态
				isLoadingTable:false,
				dialogLoading:false,
				// 表格数据
				tableData: [],
				// 多选操作数据
				accountTotal:0,
				currentPage: 1,
				//用户新增/编辑弹框标题
				accountTitle:'新增APP用户',
				accountDialog:false,
				//查看
				isReadonly:false,
				//编辑和新增判断
				submitType:0,//0:新增；1:编辑；2:查看
				//权限区域
				organizationDistrict:[],
				//机构列表
				organization:{
					list:[],
					loading:false
				},
				//角色弹框
				rolesDialog:false,
				rolesDialogLoading:false,
				//角色列表
				rolesList:[],
				//角色信息
				rolesData:{},
				//已勾选角色
				SelectRoles:[],
				saveRoleBtnLoading:false,
				defaultPropsDistrict:{
					lazy:true,
					checkStrictly:true,
					lazyLoad(node,resolve){
						const { level , value } = node;
						getOrganizationDistrict({parentId:value}).then(res => {
							const nodes = res.data.map(item => ({
								value:item.id,
								label:item.name,
								leaf:level >= 3
							}))
							resolve(nodes);
						})
					}
				},
				isEdite:false,
				enterprise:{
					list:[],
					loading:false
				},
				IDcard:{
					positiveLoading:false,
					relativeLoading:false,
					certificateLoading:false,
					positiveImageUrl:"",
					relativeImageUrl:"",
					certificateImageUrl:""
				}
			};
		},
		created() {
			this.handleInitData();
		},
		methods: {
			//数据初始化
			handleInitData:function () {
				this.handleGetTable();
				this.handleRolesData();
				this.getOrganizationDistrict(1);
			},
			//APP端获取表格数据
			handleGetTable:function (page) {
				this.isLoadingTable = true;
				page != undefined ? this.currentPage = page : "";
				let params = {
					page:this.currentPage,
					size:10
				};
				Object.assign(params,this.queryForm);
				getAppAccountTable(params).then(res => {
					this.tableData = res.data.rows;
					this.accountTotal = res.data.total;
					this.isLoadingTable = false;
				})
			},
			//获取所有角色列表
			handleRolesData:function () {
				let params = {
					page:1,
					size:999,
					name:""
				};
				getRolesData(params).then(res => {
					let datas = res.data.rows;
					this.rolesList = datas.map(item => {
						item['isFalse'] = false;
						return item
					});
				})
			},
			//新增弹框
			handleNewAddAccount:function () {
				this.accountDialog = true;
				this.submitType = 0;
				this.accountTitle = "新增APP用户";
			},
			//新增/编辑提交按钮
			handleSubmit:function (formName) {
				var that = this;
				this.$refs['formData'].validate(valid => {
					if(valid){
						if(that.submitType == 0){
							let params = JSON.parse(JSON.stringify(that.dialogFormData));
							accountAppNewAdd(params).then(res => {
								this.accountDialog = false;
								this.handleGetTable(1);
							})
						}else{
							let params = JSON.parse(JSON.stringify(that.dialogFormData));
							accountAppEdite(params).then(res => {
								this.accountDialog = false;
								this.handleGetTable(1);
							})
						}
					}
				});
			},
			//弹框重置按钮
			handleReset:function (formName) {
				this.$refs[formName].resetFields();
				this.IDcard = {
					positiveLoading:false,
					relativeLoading:false,
					certificateLoading:false,
					positiveImageUrl:"",
					relativeImageUrl:"",
					certificateImageUrl:""
				};
			},
			//查看用户
			handleViewAccount:async function (row) {
				this.accountTitle = "用户详情";
				this.submitType = 2;
				this.dialogLoading = true;
				this.accountDialog = true;
				let obj = {};
				await getAppAccountDetail({id:row.userId}).then(res => {
					obj = res.data;
				});
				if(obj.organization){
					obj['organizationId'] = obj.organization.id;
					obj['organizationName'] = obj.organization.name;
				};
				if(obj.city && obj.district && obj.town && obj.village){
					obj['regionName'] = obj.city.name + '/'+obj.district.name + '/' + obj.town.name + '/' + obj.village.name;
				};
				if(obj.identityFile){
					this.IDcard.positiveImageUrl = config.baseUrlImg + obj.identityFile.filePath
				};
				if(obj.identityVersoFile){
					this.IDcard.relativeImageUrl = config.baseUrlImg + obj.identityVersoFile.filePath
				};
				if(obj.membersFile){
					this.IDcard.certificateImageUrl = config.baseUrlImg + obj.membersFile.filePath
				};
				if(obj.enterprise){
					obj['enterpriseId'] = obj.enterprise.id;
					obj['enterpriseName'] = obj.enterprise.name;
				};
				this.dialogFormData = obj;
				this.isReadonly = true;
				this.dialogLoading = false;
			},
			//编辑用户
			handleEditeAccount:async function (row) {
				this.accountTitle = "编辑用户";
				this.submitType = 1;
				this.dialogLoading = true;
				this.accountDialog = true;
				delete this.formrules['password'];
				let obj = {};
				await getAppAccountDetail({id:row.userId}).then(res => {
					obj = res.data;
				});
				if(obj.organization){
					this.bindQueryOrganizations(obj.organization.name);
					obj['organizationId'] = obj.organization.id;
				};
				if(obj.city && obj.district && obj.town && obj.village){
					obj['regionName'] = obj.city.name + '/'+obj.district.name + '/' + obj.town.name + '/' + obj.village.name;
					obj['regionPermission'] = [obj.city.id,obj.district.id,obj.town.id,obj.village.id];
				};
				if(obj.identityFile){
					this.IDcard.positiveImageUrl = config.baseUrlImg + obj.identityFile.filePath
				};
				if(obj.identityVersoFile){
					this.IDcard.relativeImageUrl = config.baseUrlImg + obj.identityVersoFile.filePath
				};
				if(obj.membersFile){
					this.IDcard.certificateImageUrl = config.baseUrlImg + obj.membersFile.filePath
				};
				if(obj.enterprise){
					obj['enterpriseId'] = obj.enterprise.id;
					await this.getEnterpriseData(obj.enterprise.name);
				};
				this.dialogFormData = obj;
				this.dialogLoading = false;
			},
			//角色按钮弹框
			handleRoleSelect:function (row) {
				this.rolesData = row;
				this.rolesDialog = true;
				this.rolesDialogLoading = true;
				getAccountRoles({userId:row.userId}).then(res => {
					this.rolesList.forEach((itemOut,index,arr) => {
						itemOut.isFalse = false;
						res.data.forEach(itemIn => {
							if(itemOut.id == itemIn.id){
								itemOut.isFalse = true;
							}
						})
					})
					this.SelectRoles = this.rolesList.filter(item => {
						return item.isFalse
					});
					this.rolesDialogLoading = false;
				})
			},
			//角色赋予
			selectRoles:function (i) {
			 this.rolesList.forEach((item,index)=>{
				if(index==i){
					item.isFalse=!item.isFalse
				}
			 });
			 this.SelectRoles = this.rolesList.filter(item => {
				 return item.isFalse
			 });
			},
			//提交角色赋予
			handleSubmitRoles:function () {
				let roleIds = this.SelectRoles.map(item => {
					return item.id
				});
				let params = {
					userId:this.rolesData.userId,
					roleIdList:roleIds
				};
				this.saveRoleBtnLoading = true;
				saveAccountRoles(params).then(res => {
					this.$message.success('操作成功！');
					this.saveRoleBtnLoading = false;
					this.rolesDialog = false;
				})
			},
			//单条启用用户
			handleStartAccount:function (row) {
				this.$confirm('此操作将启用此账户, 是否继续?','提示',{
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type:'warning'
				}).then(res => {
					let params = {
						ids:row.userId,
						state:row.state == "ENABLED" ? 'DISABLED':'ENABLED'
					};
					SaveAccountState(params).then(res => {
						this.$message.success('操作成功！');
						this.handleGetTable();
					})
				})
			},
			//单条禁用用户
			handleStopAccount:function (row) {
				this.$confirm('此操作将停用此账户, 是否继续?','提示',{
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type:'warning'
				}).then(res => {
					let params = {
						ids:row.userId,
						state:row.state == "ENABLED" ? 'DISABLED':'ENABLED'
					};
					SaveAccountState(params).then(res => {
						this.$message.success('操作成功！');
						this.handleGetTable();
					})
				})
			},
			//单条删除用户
			handleDeleteAccount:function (row) {
				this.$confirm('此操作将永久删除此用户, 是否继续?','提示',{
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type:'warning'
				}).then(res => {
					let userId = row.userId;
					accountDelete({ids:userId}).then(res => {
						this.$message.success("操作成功！");
						this.handleGetTable();
					})
				})
			},
			//表格数据勾选回调
			handleSelectionChange:function (val) {
				this.$emit('bindMultipleSelection',val)
			},
			//分页查询
			handleCurrentChange:function (val) {
				this.handleGetTable(val);
			},
			//弹框关闭回调
			handleClose:function (formName) {
				this.IDcard = {
					positiveLoading:false,
					relativeLoading:false,
					certificateLoading:false,
					positiveImageUrl:"",
					relativeImageUrl:"",
					certificateImageUrl:""
				};
				this.$refs[formName].resetFields();
				this.isReadonly = false;
				this.isEdite = false;
			},
			//获取组织区域列表
			getOrganizationDistrict:function (id) {
				getOrganizationDistrict({parentId:id}).then(res => {
					this.organizationDistrict =res.data
				})
			},
			//区域权限修改
			handleChangeEdite:function(){
				this.isEdite = true;
			},
			//模糊查询企业
			getEnterpriseData:function (name) {				
				if(name){
					let params = {
						page:1,
						size:999,
						name:name
					};
					this.enterprise.loading = true;
					return new Promise((resolve,reject) => {
						getEnterpriseData(params).then(res => {
							this.enterprise.list = res.data.rows;
							this.enterprise.loading = false;
							resolve();
						})
					})
				}
			},
			beforeIDcardPositiveUpload:function () {
				this.IDcard.positiveLoading = true;
				return true
			},
			//身份证正面照上传成功回调
			handleSuccessIDcardPositive:function (res,file,fileList) {
				this.dialogFormData.identityFileId = res.data.id;
				this.IDcard.positiveImageUrl = config.baseUrlImg + res.data.filePath;
				this.IDcard.positiveLoading = false;
			},
			beforeIDcardRelativeUpload:function () {
				this.IDcard.relativeLoading = true;				
				return true
			},
			//身份证反面照上传成功回调
			handleSuccessIDcardReverse:function (res,file,fileList) {
				this.dialogFormData.identityVersoFileId = res.data.id;
				this.IDcard.relativeImageUrl = config.baseUrlImg + res.data.filePath;
				this.IDcard.relativeLoading = false;
			},
			//
			beforeCertificateUpload:function () {
				this.IDcard.certificateLoading = true;
				return true
			},
			//五大员证书上传成功回调
			handleSuccessCertificate:function (res,file,fileList) {
				this.dialogFormData.membersFileId = res.data.id;
				this.IDcard.certificateImageUrl = config.baseUrlImg + res.data.filePath;
				this.IDcard.certificateLoading = false;
			},
			//区域权限选择回调
			handleSelectDistrict:function (val) {
				this.dialogFormData['cityId'] = "";
				this.dialogFormData['districtId'] = "";
				this.dialogFormData['townId'] = "";
				this.dialogFormData['villageId'] = "";
				if(val){
					val[0] && (this.dialogFormData['cityId'] = val[0]);
					val[1] && (this.dialogFormData['districtId'] = val[1]);
					val[2] && (this.dialogFormData['townId'] = val[2]);
					val[3] && (this.dialogFormData['villageId'] = val[3]);
				}
			},
			//机构列表模糊查询
			bindQueryOrganizations:function (name) {
				if(name){
					let params = {
						name:name
					};
					this.organization['loading'] = true;
					getOrganizationList(params).then(res => {
						this.organization['list'] = res.data;
						this.organization['loading'] = false;
					})
				}			
			}
		}
	};
</script>

<style lang="scss" scoped>
.can-container {
  padding: 20px;
	background:#fff;
  .title {
    font-size: 24px;
    font-weight: 500;
    color: rgba(72, 73, 77, 1);
    line-height: 33px;
  }
}

.btnsearch {
  background: #969799;
  color: white;
}

.btnReset {
  background: white;
  color: #969799;
}
.userList {
  margin: 30px 0px;
}
.btnuser {
  border: 1px solid #2e8ae6;
  color: #2e8ae6;
}
.pages {
  text-align: center;
  margin: 20px auto;
}
.rolesTitle{
  font-size: 14px;
  color: #333333;
}
.rolesBox{
  width: 100%;
  height: 308px;
	overflow: auto;
  background: #F8F8F8;
  border-radius:4px; 
  padding: 5px 15px;
  
}
.rolesBox p{
  padding: 5px;
  font-size: 12px;
  color: #333;
  display: flex;
  justify-content: space-between;
}
.rolesBox p.clickNo{
  color: #2e8ae6;
  cursor: pointer;
}
.rolesBox p:hover{
  color: #2e8ae6;
  cursor: pointer;
}
.p-1{
	padding:0 10px;
}
</style>

<style lang="scss" scoped>
	.avatar-uploader /deep/ .el-upload {
	    border: 1px dashed #d9d9d9;
	    border-radius: 6px;
	    cursor: pointer;
	    position: relative;
	    overflow: hidden;
			width:120px;
			height:120px;
			line-height: 120px;
	  }
	.avatar-uploader /deep/ .el-upload:hover {
		border-color: #409EFF;
	}
	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}
	.avatar {
		width: 120px;
		height: 120px;
		display: block;
	}
	/deep/ .el-textarea textarea{
		min-height: 40px !important;
	}
</style>
